<template>
	<view class="user-box left clearfix bai" style="height:100%;">
		<top></top>
		<view class="user-content left clearfix">
			<view class="user-left left clearfix">
				<view class="user-header-box left clearfix">
					<view class="user-header-img left clearfix">
						<image :src="userinfo.avatar" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;"></image>
					</view>
					<view class="user-nickname left clearfix ellipsis">
						{{userinfo.nickname}}
					</view>
				</view>
				
				<view class="top-right-upload left"  @click="navigateToPage('publish')">
					<uni-icons type="icon-shangchuan5" size="13" color="#fff" custom-prefix="iconfont"></uni-icons>
					上传作品
				</view>
				
				
				
				<view class="user-menu left clearfix">
					
					
					<view class="user-menu-item left clearfix bai" v-if="page =='edit'" @click="navigateToPage('edit')">
						<label>
							<uni-icons type="icon-wode10" color="#2979ff" size="18" custom-prefix="iconfont"></uni-icons>
						</label>
						<label style="color:#2979ff;font-weight:500;">
							账号设置
						</label>
					</view>
					
					
					<view class="user-menu-item left clearfix bai" v-else @click="navigateToPage('edit')">
						<label>
							<uni-icons type="icon-wode10" color="#333" size="18" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							账号设置
						</label>
					</view>
					
					
					
					
					<view class="user-menu-item left clearfix bai" @click="navigateToPage('works')">
						<label>
							<uni-icons type="icon-yingyong7" color="#333" size="18" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							我的作品
						</label>
					</view>
					
					
					<view class="user-menu-item left clearfix bai" v-if="page == 'order'"  @click="navigateToPage('order')">
						<label>
							<uni-icons type="icon-jilu5" color="#2979ff" size="18" custom-prefix="iconfont"></uni-icons>
						</label>
						<label style="color:#2979ff;font-weight:500;">
							我的订单
						</label>
					</view>
					
					<view class="user-menu-item left clearfix bai" v-else  @click="navigateToPage('order')">
						<label>
							<uni-icons type="icon-jilu5" color="#333" size="18" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							我的订单
						</label>
					</view>
					
					
					
					
				</view>
			</view>
			
			<view class="user-right right clearfix">
				<edit-userinfo v-if="page=='edit'" :userinfo="userinfo"></edit-userinfo>
				<order-list v-if="page == 'order'" :userinfo="userinfo"></order-list>
			</view>
		</view>
		<login :show="showLogin"></login>
	</view>
</template>

<style scoped>
	.user-right{width:calc(100% - 270px);height:100%;background:#fff;border-radius: 12px;}
	.top-right-upload{width:60%;height:35px;margin-left:20%;line-height:35px;text-align: center;border-radius: 5px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);margin-top:20px;font-size:13px;color:#fff;cursor:pointer;}
	.user-menu-item label{margin-right:5px;line-height:50px;}
	.user-menu-item{height:50px;line-height:50px;text-align: center;font-size:15px;}
	.user-menu{width:200px;margin-left:20px;min-height:300px;margin-top:30px;}
	.user-nickname{width:200px;line-height:30px;height:30px;text-align: center;font-weight:500;margin-left:20px;font-size:15px;margin-top:5px;}
	.user-header-img{width:70px;height:70px;margin-left:calc((100% - 70px)/2);border-radius: 50%;border:1px solid #eee;}
	.user-header-box{width:100%;height:110px;margin-top:20px;}
	.user-left{width:240px;height:100%;background:#fff;border-radius: 12px;}
	body, uni-page-body{height:100%;}
	.user-content{width: 96%;height: calc(100% - 110px);margin-left: 2%;margin-top: 70px;}
</style>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				showLogin:false,
				page:null
			}
		},
		onLoad(e) {
			var that = this;
			if(e && e.page){
				this.page = e.page;
			}else{
				uni.showToast({
					title:'页面出错',
					icon:'none',
					duration:2000
				})
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				},2000);
				
				return false;
			}
		},
		created() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(res){
					var userinfo = res.data;
					if(!userinfo || !userinfo._id){
						that.showLogin = true;
					}else{
						that.userinfo = userinfo;
					}
				},
				fail() {
					that.showLogin = true;
				}
			});
		},
		methods: {
			//跳转页面
			navigateToPage(page){
				this.page = page;
				if(page == 'edit' || page =='order'){
					var p = '/pages/userinfo/index?page='+page;
				}else if(page == 'works'){
					var p = '/pages/works/works';
				}else if(page == 'publish'){
					var p = '/pages/works/publish';
				}
				uni.navigateTo({
					url:p
				})
			}
		}
	}
</script>

